<template>
  <zm-page>
    <zm-body>
      <iframe v-if="realUrl" @load="loadHandler" class="router__iframe" :src="realUrl"></iframe>
      <div class="router__iframe-back" @click="gobackFun" v-if="$route.query.goback">返回</div>
    </zm-body>
  </zm-page>
</template>

<script>
/*
  功能描述  第三方页面iframe代理
  创建人    zgf
  更新时间  2019/06/04
  文档地址  http://note.youdao.com/noteshare?id=dd285824ab3b81bdbf6b1fc684ff0652
  url参数  url 要打开的第三方页面地址（请务必用路由的query传递）
  备注      
*/
export default {
  name: "IframeAgent",
  data() {
    return {
      loading: true,
      url: ""
    };
  },
  computed: {
    realUrl() {
      return this.$route.query.url || "";
    }
  },
  mounted() {
    this.$toast.loading({
      mask:false,
      message:'加载中...',
      duration:0
    })
  },
  methods: {
    loadHandler(){
      this.$toast.clear();
    },
    gobackFun(){
      var backTo = this.$route.query.goback;
      if(!isNaN(backTo)){
        this.$router.go(backTo)
      }else{
        location.href = decodeURIComponent(backTo)
      }
    }
  },
  beforeRouteLeave (to, from, next) {
    this.$toast.clear();
    next();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.router__iframe{
    width:100%;
    height: 100%;
    border: none;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}
.router__iframe-back{
  width: 50px;
  height: 50px;
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  position: fixed;
  bottom: 6rem;
  right: 20px;
  background-color: rgba(0,0,0,0.6);
  border-radius: 2rem;
  &:active{
    opacity: 0.8;
  }
}

</style>
